<template>
  <div class="action_sheet" ref="action">
    <ul class="list">
      <!-- <li v-for="val in dataList1" :key="val.id" @click="handleClick(val.id)">
                <h1 slot="actionList">{{val.name}}</h1>
            </li> -->
      <li>
        <h1>查看大图</h1>
      </li>

      <li>
         <div class="inpBox">
            <input
          type="file"
          ref="file"
          class="inp"
          @input="uploader"
        />
         </div>
         <h1 class="h1">从手机相册选择照片</h1>
      </li>

      <li>
        <h1>拍照</h1>
      </li>

      <li @click="handleClick(4)">
        <h1>取消</h1>

      </li>
    </ul>
  </div>
</template>

<script>
import { Uploader } from 'vant'
import * as qiniu from 'qiniu-js'
export default {
  data () {
    return {
      value: '123',
      imgUrl: '',
      // dataList1: ["查看大图","从手机相册选择照片","拍照","取消"]
      dataList1: [
        {
          id: 1,
          name: '查看大图'
        },
        {
          id: 2,
          name: '从手机相册选择照片'
        },
        {
          id: 3,
          name: '拍照'
        },
        {
          id: 4,
          name: '取消'
        }
      ]
    }
  },
  mounted () {
    const file = this.$refs.file.files
    console.log(file[0])
    this.$bus.$on('action_sheet1', (data) => {
      this.$refs.action.style.bottom = '0'
    })

    this.$bus.$on('action_sheet2', (data) => {
      this.$refs.action.style.bottom = '-50%'
    })
  },
  methods: {
    // 取消按钮隐藏
    handleClick (e) {
      console.log(e)
      if (e == 4) {
        this.$refs.action.style.bottom = '-50%'
        this.$store.commit('overlayChanged', false)
      }
    },
    // 文件上传
    uploader () {
      const a = ''
      const file = this.$refs.file.files[0]
      console.log('000000', this.$store)
      const that = this
      console.log(file)
      this.request.get('http://127.0.0.1/qiniu_upload').then((data) => {
        console.log(data.uploadToken)

        const putExtra = {}
        const config = {
          region: qiniu.region.z2
        }
        const observable = qiniu.upload(
          file,
          file.name,
          data.uploadToken,
          putExtra,
          config
        )

        const observer = {
          next (res) {
            // ...
          },
          error (err) {
            // ...
            console.log(err)
          },
          complete (res) {
            console.log(res)
            // ...
            // this.$store.state.head_img = data.url+res.key
            console.log(res)
            const imgUrl = data.url + res.key

            // 图片地址上传后台
            that.request.get('/api/head_imgChanged', { imgUrl })
              .then((res) => {
                console.log(res)
                localStorage.setItem('head_img', imgUrl)
                that.$store.commit('head_imgChanged', imgUrl)
              })
              .catch((err) => {
                console.log('图片上传失败')
              })
          }
        }

        const subscription = observable.subscribe(observer)
        console.log(data.url)
      })
      this.$refs.action.style.bottom = '-50%'
      this.$store.commit('overlayChanged', false)
    }
  }
}
</script>

<style scoped>
.action_sheet {
  width: 100%;
  height: 14rem;
  background-color: rgb(255, 255, 255);
  position: absolute;
  bottom: -50%;
  z-index: 999;
  transition: all 0.5s;
}
.action_sheet li {
  width: 100%;
  line-height: 50px;
  text-align: center;
  background-color: rgb(255, 255, 255);
}
.action_sheet li:last-child {
  margin-top: 15px;
}
.action_sheet li h1 {
  font-size: 18px;
  color: black;
}
.inpBox{
  width: 100%;
  height: 50px;
  position: absolute;
}
.inp {
  width: 23.4375rem;
  height: 50px;
  opacity: 0;
}

</style>
